<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">

    </div>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 必须创建的三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 'yellow' });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(3, 3, 3)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)
        }
        render();

        // 2. 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);

        // 3. 二维二次贝塞尔曲线QuadraticBezierCurve
        // p1、p2、p3表示三个点坐标
        // p1、p3是曲线起始点，p2是曲线的控制点
        const p1 = new THREE.Vector2(-4, 0);
        const p2 = new THREE.Vector2(2, 6);
        const p3 = new THREE.Vector2(4, 0);
        // 3.1 二维二次贝赛尔曲线
        const curve = new THREE.QuadraticBezierCurve(p1, p2, p3);

        const pointsArr = curve.getPoints(100); //曲线上获取点
        const geometry1 = new THREE.BufferGeometry();
        geometry1.setFromPoints(pointsArr); //读取坐标数据赋值给几何体顶点
        const material1 = new THREE.LineBasicMaterial({ color: 0x00fffff });
        const line = new THREE.Line(geometry1, material1);
        scene.add(line)

        // 3.2 点模型渲染：三点连成线： 贝塞尔曲线与直线p12和p23相切。
        const geometry2 = new THREE.BufferGeometry();
        geometry2.setFromPoints([p1, p2, p3]);
        const material2 = new THREE.PointsMaterial({
            color: 0xff00ff,
            size: .2,
        });
        //点模型对象
        const points = new THREE.Points(geometry2, material2);
        // 三个点构成的线条
        const line2 = new THREE.Line(geometry2, new THREE.LineBasicMaterial());
        scene.add(line2)


        // 4. 三维二次贝赛尔曲线 QuadraticBezierCurve3
        {
            // p1、p2、p3表示三个点坐标
            const p1 = new THREE.Vector3(-2, 0, 0);
            const p2 = new THREE.Vector3(0, 4, -1);
            const p3 = new THREE.Vector3(2, 0, 1);
            // 三维二次贝赛尔曲线
            const curve = new THREE.QuadraticBezierCurve3(p1, p2, p3);

            const pointsArr = curve.getPoints(100); //曲线上获取点
            const geometry = new THREE.BufferGeometry();
            geometry.setFromPoints(pointsArr); //读取坐标数据赋值给几何体顶点
            const material = new THREE.LineBasicMaterial({ color: 0x00fffff });
            const line = new THREE.Line(geometry, material);
            scene.add(line)
        }

        // 三维三次贝赛尔曲线 CubicBezierCurve3, 不知道有何区别？
        {
            const p1 = new THREE.Vector3(-2, 0, 0);
            const p2 = new THREE.Vector3(0, 4, -1);
            const p3 = new THREE.Vector3(2, 0, 1);
            const p4 = new THREE.Vector3(3, 1, 1);
            // 三维三次贝赛尔曲线
            const curve = new THREE.CubicBezierCurve3(p1, p2, p3, p4);

            const pointsArr = curve.getPoints(100); //曲线上获取点
            const geometry = new THREE.BufferGeometry();
            geometry.setFromPoints(pointsArr); //读取坐标数据赋值给几何体顶点
            const material = new THREE.LineBasicMaterial({ color: 'green' });
            const line = new THREE.Line(geometry, material);
            scene.add(line)
        }
        


    </script>
</body>

</html>